<template>
	<view class="exhibition-list-page">
		<!--标题栏-->
		<bar-title  bgColor='bg-white'>
			<block slot="content">展会信息</block>
		</bar-title>

		<view class="container">
			<view class="exhibition-list">
				<view class="exhibition-box" 
					v-for="(item, index) in exhibitionList " :key="index">
					<view class="exhibition" @click="jumpExhibition(item)">
						<image class="exhibition-img" :src="item.pictureurl"></image>
						<view class="exhibition-info">
							<view class="title">{{item.exhibitionname}}</view>
							<view class="time-box">
								<image class="icon" src="/static/img/ic_date.png" mode="widthFix"></image>
								<text class="time">{{item.startdate}} 至 {{item.enddate}}</text>
							</view>
							<view class="address-box">
								<image class="icon" src="/static/img/ic_address.png" mode="widthFix"></image>
								<text class="address">{{item.address}}</text>
							</view>
						</view>
					</view>
				</view>
				
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
	export default {
		name: 'exhibition',
		components: {
			uniLoadMore
		},
		data() {
			return {
				pagenum: 1,
				loadingType: 'more',
				exhibitionList:[]
			}
		},
		onLoad() {
			this.getExhibition(this.pagenum)
		},
		methods: {
			async getExhibition(pagenum) {
				this.loadingType = 'loading'
				let exhibitionList =  await this.$apis.getExhibition({pagenum})
				this.exhibitionList = this.exhibitionList.concat(exhibitionList)
				if (exhibitionList.length < 20) {
					this.loadingType = 'noMore'
					return
				}
				this.loadingType = 'more'
			},
			jumpExhibition(item) {
				this.$store.commit('setStateAttr', {
					key: 'selectImg',
					val: {
						name: item.exhibitionname,
						img: item.exhibitioncontent
					}
				}) 
				this.$jumpPages('imgDetail')
			}
		},
		onReachBottom(e) {
			if(this.loadingType == 'loading' || this.loadingType == 'noMore'){
			    return
			}
			this.pagenum = this.pagenum + 1
			this.getExhibition(this.pagenum)
		},
	}
</script>
<style lang="scss" scoped>
	page, .exhibition-list-page{
		background: #FFFFFF;
		min-height: 100%;
	}
	.exhibition-box{
		padding-top: 30rpx;
		margin: 0 30rpx;
		border-radius: 20rpx;
	}
	.exhibition{
		background-color: #F7F9FF;
		.exhibition-img{
			width: 100%;
			height: 300rpx;
			border-radius: 20rpx;
		}
		.exhibition-info{
			padding: 30rpx;
			font-size: 28rpx;
			color: #BBBBBB;
			.time-box,.address-box{
				display: flex;
				align-items: center;
				margin-top: 16rpx;
			}
			.title{
				font-weight: 700;
				color: #000000;
				font-size: 30rpx;
			}
			.icon{
				width: 28rpx;
				height: 28rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>

